with

 <div *ngIf="loader" class="sync alternate blue icon">
                <span class="">{{value}}</span>
            </div>

with

 <i *ngIf="loader" class="spinner blue icon">
                <span class="">{{value}}</span>
            </i>

--> results:
GPU: 30% before, 2% after
CPU: 23% before, 6% after.

Results, with no data in network (Task View) and the lowest numbers.

With CSS Animation:

• Workflow view GPU: 13% CPU: 11%
• Pipeline view GPU 20% CPU: 12%

Gif:

• Workflow view GPU: 4.3% CPU: 6%
• Pipeline view GPU 6.6% CPU: 8%

Static:

• Workflow view GPU: 1.9% CPU: 4.9%
• Pipeline view GPU 1.9% CPU: 6%

CDS Report build-all-cds#12601.0 ✘

• Build
  • Build and Package All ✔
  • Build Debpacker ✔
  • Build OS-Ansible-Inventory ✔
  • Build SMTPMock ✔
  • Lint UI Translate ✔
  • Test CLI ✔
  • Test Engine ✔
  • Test SDK ✔
  • Test SDK Rust ✔
  • Test UI ✘

Screenshots with gif (dark and not)